El analizador de paquetes NextJS da un resultado como este:
Page Size First Load JS ┌ λ / 12 kB 368 kB ├ └ 79.202101.46dabc.chunk.css 10.3 kB ... + First Load JS shared by all 195 kB ├ chunks/0e69992b3e9a8d51f37748cf97b75268d47a0f0c.f372af.js 27.6 kB ├ chunks/cf0e5769c2fa5761a95adfa95a4e062fb86f8f05.272397.js 91.4 kB ├ chunks/commons.9707f2.js 9.01 kB ├ chunks/framework.efaa9a.js 46.9 kB ├ chunks/main.9965a5.js 6.39 kB ├ chunks/pages/_app.a4ce0d.js 11.4 kB ├ chunks/webpack.8e3a04.js 2.72 kB └ 62.202101.796f1f.chunk.css 3.7 kB¿Qué mide exactamente "First Load JS" y por qué no es igual a la suma de "First Load JS compartida por todos" y el tamaño de la página y sus subpáginas? Es decir, según esta salida, esperaría que First Load JS sea igual a 12 kb + 10,3 kb + 195 kb, no a 368 kb.
Gracias.
Esto es lo que dicen los documentos:
Tamaño : la cantidad de activos descargados al navegar a la página del lado del cliente. El tamaño de cada ruta solo incluye sus dependencias.
First Load JS : la cantidad de activos descargados al visitar la página desde el servidor. La cantidad de JS compartida por todos se muestra como una métrica separada.
Si estás leyendo lo anterior y te molestan las referencias circulares, no estás solo. La salida es más confusa en su caso porque solo tiene una ruta en la lista (aunque presumiblemente corta más), pero los documentos, de alguna manera útil, notan que "la salida muestra información sobre cada ruta".
Básicamente, cuando un usuario visita el sitio por primera vez, primero descarga el First Load JS para la ruta solicitada desde el servidor y luego comienza a cargar activos adicionales en el lado del cliente a medida que se muestra la página.
La UX de esta salida es muy confusa, pero una vez que comprende los términos, los números realmente se suman.
First Load JS shared by all , por el contrario, se refiere a los activos JS compartidos (y cargados al visitar) cada ruta. En su caso, First Load JS compartido por todos = 195KB, que es (aproximadamente) igual a (27.6+91.4+9.01+46.9+6.39+11.4+2.72)... el CSS aparentemente no está incluido (supongo que para la única razón por la que no es JS, lo que parece tonto, pero lo que sea).
El punto de la métrica "compartido por todos" es que si puede reducir ese número, reducirá la cantidad que sus usuarios tienen que descargar en cada ruta, por lo que aparentemente es un buen lugar para comenzar a optimizar.